<template>
  <div class="flex items-center justify-center">
    <MoleculeContractListCardContainer
      v-if="
        favoritesStore.favoritesList.length > 0 &&
        !favoritesStore.favoritesListPending
      "
      :contact-list="favoritesStore.favoritesList"
    />
    <AtomSpinner110
      v-else-if="favoritesStore.favoritesListPending"
      class="absolute top-1/2"
    />
    <AtomFavoritesEmpty v-else-if="filtersEmpty" />
    <AtomFavoritesNotFound v-else />
  </div>
</template>

<script setup lang="ts">
import { useFavoritesStore } from '~/stores/favoritesStore'
import { useFilterStore } from '~/stores/filterStore'
import { useUserStore } from '~/stores/userStore'

const userStore = useUserStore()
const favoritesStore = useFavoritesStore()
const filterStore = useFilterStore()

const filtersEmpty = computed(
  () =>
    filterStore.filter.selectedCities.length === 0 &&
    filterStore.filter.selectedOrgs.length === 0 &&
    filterStore.filter.selectedPositions.length === 0 &&
    filterStore.filter.selectedSort === ''
)

watch(
  () => userStore.user.favorites,
  () => {
    favoritesStore.getFavoritesList(filterStore.filter)
  }
)

watch(
  filterStore.filter,
  () => {
    favoritesStore.getFavoritesList(filterStore.filter)
  },
  {
    deep: true
  }
)

onBeforeMount(() => {
  favoritesStore.getFavoritesList(filterStore.filter)
})
</script>

<style scoped></style>
